<!--
 * @Description:个人中心-首页
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-15 10:10:00
 * @LastEditors: WangXi
 * @LastEditTime: 2023-06-16 18:30:01
-->
<template>
	<view class="user-center" :style="userInfoPaddingTop">
		<!-- 顶部按钮 -->
		<view class="top-view">
			<c-status-bar />
			<!-- 顶部按钮 -->
			<view class="top-buttons">
				<view class="group" v-for="item in topBtnList" @click="topBtnClick(item.key)" :key="item.key">
					<view class="tip-origin" v-if="item.dot"></view>
					<image style="width: 100%; height: 100%;" referrerpolicy="no-referrer" :src="item.img" />
				</view>

			</view>
		</view>


		<view class="user-info">
			<!-- 用户栏 -->
			<view class="user-info-bar">
				<view class="user-box" @click="editClick()">
					<!-- 头像 -->
					<view class="user-avatar">
						<u-avatar size="112"
							:src='vuex_user_info.avatar?$u.file.getMedieUrl(vuex_user_info.avatar):$u.file.getMedieUrl(vuex_userDefaultTopImg)'
							:show-level='true' :level-icon='cameraFill' mode="circle"></u-avatar>
					</view>
					<!-- 用户信息描述文字 -->
					<view class="user-info-text">
						<view class="">
							<text class="name-hometown">{{ vuex_user_info.nickName || $t('user.loginType') }}</text>
						</view>

					</view>
				</view>
				<!-- 新版  用户身份按钮-->
				<view class="user-status-btn">
					<view :class="`u-btn blue ${userType.isAnchor?'orange':''}`" @click="userStatePath('anchor')">
						<imageForSize size="80" :src="require('@/static/images/user/anchor.png')"></imageForSize>
						{{userType.isAnchor?$t('user.AnchorConsole'):$t('user.BecomeAnchor')}}
					</view>
					<view :class=" `u-btn blue ${userType.isStorekeeper?'orange':''}`" @click="userStatePath('storekeeper')">
						<imageForSize size="80" :src="require('@/static/images/user/shop.png')"></imageForSize>
						{{userType.isStorekeeper?$t('user.shopAdministration'):$t('user.ApplyShop')}}
					</view>
				</view>

				<view class="user-balance">
					<p style="position: absolute;right: 10px;top: 10px;" @click="onreset()"><u-image width="20px"
							height="20px" src='../../static/images/refresh.png'></u-image> </p>
					<!--    余额和代币      -->
					<view class="box_money_double">
						<view class="national-flag">
							<p class="number">${{ Number(vuex_user_info.balance).toFixed(2) || '0.00' }}</p>
							<p class="">{{ $t('user.accountBalance') }}</p>
						</view>
						<view class="national-flag" @click="clickGoCoinChange">
							<p class="number">{{ Number(vuex_user_info.goldBalance) || '0' }}</p>
							<p class="">{{ $t('user.storeBalance') }}</p>
						</view>

					</view>
					<!-- 充值&提现 -->
					<view class="recharge-withdraw">
						<iconButton @click="withdrawClick" style="background: #FFF;border:1px solid #2934D0;color: #2934D0;"
							:title="$t('user.withdrawal')"></iconButton>
						<iconButton @click="rechargeClick" :title="$t('user.recharge')"></iconButton>

					</view>
				</view>

			</view>


		</view>
		<view class="user-function-area">
			<!-- 切换按钮 -->
			<!-- 		<view class="tab-change-btn">
				<view v-for="(item,index) in functionAreaTabList" :key="item.label"
					:class="`tab-button ${activeFunctionAreaKey === item.key?'is-active':''}`"
					@click="functionAreatabChange(item.key)">
					{{ item.label }}
				</view>
			</view> -->

			<view class="tab-panes">
				<!-- 	<view v-show="activeFunctionAreaKey === 'about'">
					<userTabs></userTabs>
				</view> -->
				<view class="services-pane" v-show="activeFunctionAreaKey === 'service'">
					<view class="services-menu-list">
						<view class="menu-item" v-for="item in servicesLoopData" :key="item.lanhutext"
							@click="servicesLoopClick(item.key)">
							<view>
								<image class="menu-icon" :style="`width:${item.W}rpx;height:${item.H}rpx`" :src="item.imgSrc" mode="">
									<text>{{ item.lanhutext }}</text>
							</view>
							<view class="right-arrow-icon">
								<image style="height:100%;width:100%;" src="@/static/images/user/right-arrow.png">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 客服弹窗 -->
		<u-popup v-model="customerServiceShow" mode="bottom" border-radius="14" height="520rpx">
			<view class="customerServiceBox">
				<view class="" style="width: 100%;height: 40rpx;text-align: center;">
					{{$t('user.customerService')}}
				</view>
				<view class=""
					style="width: 100%;height: 80rpx;text-align: center;margin: 40rpx 0;font-size: 12px;color: #ccc;">
					<p> {{$t('user.customerServiceTips1')}}</p>
					<p> {{$t('user.customerServiceTips2')}}</p>
				</view>
				<view class="" style="display: flex; justify-content: space-around;">
					<view class="" @click="publicJS.noOpen(()=>toCustomer(urlList[0]))">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs2.png')" />
						</view>
						<view class="">
							Support
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[1])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs3.png')" />
						</view>
						<view class="">
							Telegram
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[2])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs1.png')" />
						</view>
						<view class="">
							WhatsApp
						</view>
					</view>

				</view>
			</view>
		</u-popup>
		<u-mask :show="isShowLoading">
			<view style="display: flex;justify-content: center;align-items: center;height: 100%;">
				<u-loading mode="flower" size="60" />
			</view>
		</u-mask>
	</view>
</template>

<script>
	import userTabs from './components/userTabs.vue'
	export default {
		components: {
			userTabs
		},
		onPullDownRefresh() {
			this.$u.init.getUserInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止页面加载动画
			}, 1000);
		},


		data() {
			return {
				activeFunctionAreaKey: 'service',
				cameraFill: require('static/images/icon-avator-home.png'),
				functionAreaTabList: [{
						label: this.$t('user.services'),
						key: 'service'
					},
					{
						label: this.$t('user.aboutMe'),
						key: 'about'
					}
				],
				// 关于我的
				loopData: [{
						W: '45',
						H: '50',
						lanhuimage: require('@/static/images/user/document.png'),
						lanhutext: this.$t('user.order'),
						key: 'order',
					},
					{
						W: '54',
						H: '42',
						lanhuimage: require('@/static/images/user/video.png'),
						lanhutext: this.$t('user.anchorForApply'),
						key: 'anchor',
					},
					{
						W: '50',
						H: '46',
						lanhuimage: require('@/static/images/user/store.png'),
						lanhutext: this.$t('user.stores'),
						key: 'storeIntroduction',
					},
					{
						W: '50',
						H: '46',
						lanhuimage: require('@/static/images/user/store.png'),
						lanhutext: this.$t('user.interestStores'),
						key: 'followedStores',
					},
					{
						W: '50',
						H: '46',
						lanhuimage: require('@/static/images/user/store.png'),
						lanhutext: this.$t('user.track'),
						key: 'myTracks',
					}
				],
				// 其他服务下的小菜单
				servicesLoopData: [{
						W: '36',
						H: '30',
						imgSrc: '../../static/images/user/ticket.png',
						lanhutext: this.$t('user.servicesLoopData[0].lanhutext'),
						key: 'order/myOrder',
					},
					{
						W: '30',
						H: '36',
						imgSrc: '../../static/images/user/location.png',
						lanhutext: this.$t('user.servicesLoopData[1].lanhutext'),
						key: 'addressManage/addressManage',
					},
					// {
					// 	W: '30',
					// 	H: '36',
					// 	imgSrc: '../../static/images/user/profile.png',
					// 	lanhutext: this.$t('user.servicesLoopData[2].lanhutext'),
					// 	key: 'service/service',
					// },
					// {
					// 	W: '36',
					// 	H: '32',
					// 	imgSrc: '../../static/images/user/trucks.png',
					// 	lanhutext: this.$t('user.servicesLoopData[3].lanhutext'),
					// 	key: 'icformation/icformation',
					// },
					{
						W: '30',
						H: '36',
						imgSrc: '../../static/images/user/book-mark.png',
						lanhutext: this.$t('user.servicesLoopData[4].lanhutext'),
						key: 'cardList/cardList',
					},
					// {
					// 	W: '36',
					// 	H: '36',
					// 	imgSrc: '../../static/images/user/more-circle.png',
					// 	lanhutext: this.$t('user.servicesLoopData[5].lanhutext'),
					// 	key: 'messages/messages',
					// },
					// {
					// 	W: '36',
					// 	H: '36',
					// 	imgSrc: '../../static/images/user/add-user.png',
					// 	lanhutext: this.$t('user.servicesLoopData[6].lanhutext'),
					// 	key: 'invitation/invitation',
					// },
					{
						W: '36',
						H: '36',
						imgSrc: '../../static/images/user/team_manage.png',
						lanhutext: this.$t('user.teamManage'),
						key: 'teamManage/teamManage',
					},
					// {
					// 	W: '36',
					// 	H: '36',
					// 	imgSrc: '../../static/images/user/more-circle.png',
					// 	lanhutext: this.$t('user.servicesLoopData[8].lanhutext'),
					// 	key: 'expenseCalendar/expenseCalendar',
					// },
					// {
					// 	W: '36',
					// 	H: '36',
					// 	imgSrc: '../../static/images/user/more-circle.png',
					// 	lanhutext: '足迹-暂时入口',
					// 	key: 'myTracks/myTracks',
					// },
					// {
					// 	W: '36',
					//
					// 	H: '36',
					// 	imgSrc: '../../static/images/user/Withdrawal.png',
					// 	lanhutext: this.$t('user.withdrawal'),
					// 	key: 'recharge/recharge?type=1',
					// },
					// {
					// 	W: '36',
					// 	H: '36',
					// 	imgSrc: '../../static/images/user/Recharge.png',
					// 	lanhutext: this.$t('user.recharge'),
					// 	key: 'recharge/recharge?type=0',
					// },
					{
						W: '36',
						H: '36',
						imgSrc: '../../static/images/user/PersonalAssets.png',
						lanhutext: this.$t('user.personalAssets'),
						key: 'user/personalCapital?type=0',
					},
					// {
					// 	W: '36',
					// 	H: '36',
					// 	imgSrc: '../../static/images/user/MyCollection.png',
					// 	lanhutext: this.$t('user.MyCollection'),
					// 	key: 'collect/collect',
					// },
					{
						W: '36',
						H: '36',
						imgSrc: '../../static/images/user/storewarehouse.png',
						lanhutext: this.$t('user.platformIntroduction'),
						key: '',
					},
					// {
					// 	W: '36',
					// 	H: '36',
					// 	imgSrc: '../../static/images/user/more-circle.png',
					// 	lanhutext: this.$t('user.customerService'),
					// 	key: 'customerService',
					// },
				],
				// 顶部按钮列表
				topBtnList: [

					{
						img: require('@/static/images/user/shopping-trolley.png'),
						key: 'shopping',
						dot: 0,
					},

					{
						img: require('@/static/images/user/settings.png'),
						key: 'setting',
						dot: 0
					},
					{ //平台客服
						img: require('@/static/images/user/icon_cus_service.png'),
						key: 'customer_service',
						dot: 0
					},
				],
				// 主播列表
				anchorList: [],
				// 商店列表
				storeList: [],
				// 视频列表
				videoList: [],

				// 客服弹窗
				customerServiceShow: false,
				urlList: ['https://www.baidu.com/', 'www.baidu.com', 'www.baidu.com'],
				
				// 全屏loading
				isShowLoading:false,
			}
		},
		onShow() {
			// 填充数据 接口调试时  --- 删除
			this.cameraFill = this.$u.file.getMedieUrl(this.vuex_user_info.userLevelIcon)

			this.$u.post('/app/user/concern/page/getFans').then(r => {

			})
		},
		onReady() {

			this.$u.post('/app/h2-sys-config/getConfigServiceAddress').then((res) => {
				this.urlList = res.data
			});

		},
		mounted() {
			this.$u.init.getUserInfo()
		},
		computed: {
			userInfoPaddingTop() {
				const style = {
					'paddingBottom': 'calc(20px)'
				};
				return style
			},
			// 用户类型
			userType() {
				return this.$store.getters.userStatus
			}
		},
		methods: {
			//点击到代币兑换页面
			clickGoCoinChange() {
				uni.navigateTo({
					url: "/pages/user/CoinChange"
				})
			},
			functionAreatabChange(key) {
				console.log(this.activeFunctionAreaKey);
				if (this.activeFunctionAreaKey === key) return
				this.activeFunctionAreaKey = key;
			},
			// 关于我们下的分类按钮
			aboutLoopClick(key) {
				this.$u.init.whetherToLogin(() => {
					if (key == 'anchor') {

						this.$u.route('/pages/searchInfo/components/anchorCard/anchorHomepage/index', {
							type: 'outSide',
							anchorId: item.userId
						})
					} else {
						uni.navigateTo({
							url: '/pages/' + key + '/' + key,
							"animationType": "slide-in-right",
							"animationDuration": 300
						})
					}

				})
			},
			// 服务 点击公共方法
			servicesLoopClick(key) {
				if (key) {
					if (key !== 'customerService') {
						this.$u.init.whetherToLogin(() => {
							uni.navigateTo({
								url: '/pages/' + key,
								"animationType": "slide-in-right",
								"animationDuration": 300
							})
						})
					} else {
						this.customerServiceShow = true
					}


				} else {
					this.$u.toast(this.$t('system.comingSoon'))
				}

			},
			// 顶部按钮点击
			topBtnClick(key) {
				this.$u.init.whetherToLogin(() => {
					switch (key) {
						case 'customer_service': //跳转到平台客服
							this.customerServiceShow = true;
							break;
						case 'setting':
							uni.navigateTo({
								url: '/pages/settingInfo/settingInfo',
								"animationType": "slide-in-right",
								"animationDuration": 300
							})
							break;
						case 'shopping':
							uni.navigateTo({
								url: '/pages/myCart/myCart',
								"animationType": "slide-in-right",
								"animationDuration": 300
							})
							break;
						case 'notice':
							uni.navigateTo({
								url: '/pages/myNews/myNews',
								"animationType": "slide-in-right",
								"animationDuration": 300
							})
							break;
					}
				})
			},
			// 根据用户身份跳转
			userStatePath(key) {
				this.$u.init.whetherToLogin(() => {
					switch (key) {
						case 'anchor':
							// 是主播 跳转主播控制台 否则 申请成为主播
							this.$u.route(this.userType.isAnchor ? 'pages/anchorConsole/anchorConsole' :
								'pages/anchorForApply/anchorForApply')
							break;
						case 'storekeeper':
							console.log(key)
							// 是店主 跳转店铺管理 否则 申请开店
							this.$u.route(this.userType.isStorekeeper ? 'pages/storyType/storeManagement' :
								'pages/storeIntroduction/storeIntroduction')
							break;
						default:
							break;
					}
				})
			},
			// 充值
			rechargeClick() {
				this.$u.init.whetherToLogin(() => {
					uni.navigateTo({
						url: '/pages/recharge/recharge?type=0',
						"animationType": "slide-in-right",
						"animationDuration": 300
					})
				})
			},
			// 提现
			withdrawClick() {
				this.$u.init.whetherToLogin(() => {
					uni.navigateTo({
						url: `/pages/recharge/recharge?type=${1}`,
						"animationType": "slide-in-right",
						"animationDuration": 300
					})
				})
			},
			// 查看个人主页

			editClick() {
				this.$u.init.whetherToLogin(() => {
					uni.navigateTo({
						url: "/pages/user/components/myUserInfo",
						"animationType": "slide-in-right",
						"animationDuration": 300
					})
				})
			},

			// 客服外链
			toCustomer(url) {
				// #ifdef H5
				window.location.href = url;
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(url)

				// #endif
			},
			onreset(){
				this.isShowLoading=true
				this.$u.get('/app/user/info').then(res => {
					const userInfo = res.data;
					setTimeout(()=>{
							this.isShowLoading = false
					},1500)
									
					userInfo && this.$store.commit('$uStore', {
						name: 'vuex_user_info',
						value: userInfo
					})
				}).catch(e=>{
					setTimeout(()=>{
							this.isShowLoading = false
					},1500)
									
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$icon-width: 100rpx;

	.user-center {
		font-family: PingFang SC;
		height: 100vh;
		// height:1146.666rpx ;
		overflow: hidden auto;
		width: 100vw;
		background: url('../../static/images/user/user_bg.png') no-repeat 100% 100%;
		background-size: 100% 100%;

		// display: flex;
		// flex-direction: column;
		// padding-bottom: 200rpx;
		/deep/ .layout-content {
			.uni-scroll-view-content {
				display: flex;
				flex-direction: column;
			}
		}
	}

	.top-view {
		background-color: transparent;
		padding: 32rpx 40rpx 0;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 999;

		// 顶部按钮样式
		.top-buttons {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			.top-menu {
				display: none;
				position: absolute;
				right: 22rpx;
				bottom: -14rpx;
				width: 336rpx;
				height: 384rpx;
				box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.2);
				transform: translateY(100%);
				background-color: #fff;

				>li {
					height: 25%;
					display: flex;
					align-items: center;
				}
			}

			.group {
				position: relative;
				width: $icon-width;
				height: $icon-width;
				border-radius: 20px;
				background: #fff;

				.tip-origin {
					position: absolute;
					right: 0;
					z-index: 3;
					background-color: rgba(247, 133, 133, 1);
					border-radius: 50%;
					width: 20rpx;
					height: 20rpx;
					border: 2rpx solid rgba(255, 255, 255, 1);
				}

				&:not(:last-child) {
					margin-right: 20rpx;
				}
			}
		}
	}

	.user-info {
		padding: 0 40rpx;

		// 用户栏
		.user-info-bar {
			padding-top: 16rpx;
			padding-bottom: 30rpx;

			.user-box {
				display: flex;
				align-items: center;

				/deep/ .u-avatar__level {
					.u-icon__img {
						width: 24px !important;
					}
				}

			}

			.user-info-text {
				flex: auto;
				height: 160rpx;
				justify-content: space-between;
				display: flex;
				align-items: center;

				>view {
					flex: auto;
					display: flex;
					flex-direction: column;

					>text:nth-child(2) {
						padding-left: 48rpx;
						padding-top: 12rpx;
						color: #91909A;
						font-size: 28rpx;
					}
				}

				>.u-btn {
					background-color: #F6F6FA;
					width: 52rpx;
					height: 52rpx;

					padding: 0;
					color: #CACACA;
				}

				.name-hometown {
					// font-family: 'SF UI Display Regular';
					font-size: 40rpx;
					line-height: 48rpx;
					padding-left: 40rpx;
				}
			}

			.user-balance {
				border-radius: 10px;
				background: #fff;
				box-shadow: 0px 0px 12px rgba(230, 240, 250, 0.4);
				text-align: center;
				padding: 40rpx 0;
				margin-top: 6px;
				position: relative;

				.box_money_double {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					.national-flag {
						width: 50%;
					}
				}

				>view {
					flex: 1;
					text-align: center;

					&:first-child {
						position: relative;

						&::after {
							content: '';
							position: absolute;
							height: 100%;
							width: 2rpx;
							right: 0rpx;
							top: 0rpx;
							background-color: #c9c9c9;
							opacity: .6;
						}
					}

					.number {
						font-size: 38rpx;
						font-weight: 800;
						margin: 10px 0;
					}

					.describe {
						color: #c9c9c9;
						font-size: 18rpx;
						border: 1px solid;
						width: 100px;
						margin: 0 auto;
						border-radius: 10px;
					}
				}
			}
		}

		.user-location {
			line-height: 42rpx;

			.location-text {
				color: #91909A;
				font-size: 28rpx;
				// line-height: 32rpx;
				margin-left: 10rpx;
			}
		}

		.user-set-button {
			width: 52rpx;
			height: 52rpx;
		}

		.recharge-withdraw {
			display: flex;
			margin-top: 40rpx;

			>button {
				width: 120px;
				height: 35px;
				color: #fff;
				background-color: #2934D0;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				>image {
					margin-right: 10rpx;
				}
			}
		}



	}

	// 用户操作区
	.user-function-area {
		background-color: #fff;
		border-radius: 70rpx;

		.tab-change-btn {
			display: flex;
			height: 88rpx;
			border-bottom: 1px solid #ccc;

			>.tab-button {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				color: rgb(145, 144, 154);
				transition: 0.2s;

				&.is-active {
					// color: #333;
					color: #2934D0;
				}
			}
		}

		.tab-panes {
			padding: 40rpx 30rpx;
			min-height: 38vh;

			>.tab-pane {}

			.loop {
				display: flex;
				// flex-wrap: wrap;

				.loop-body {
					margin-right: auto;

					&:not(:first-child) {
						margin-left: 62rpx;
					}

					view {
						width: 120rpx;
						height: 120rpx;
						border-radius: 30rpx;
						background-color: #F6F6FA;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 24rpx;
						// image{
						// 	width: 45rpx;
						// 	height: 45rpx;
						// }
					}

					p {
						color: #1B1D29;
						text-align: center;
						font-size: 28rpx;
					}
				}
			}

			.services-pane {
				.services-menu-list {
					// margin-bottom: 82rpx;
				}

				.menu-item {
					background-color: #F6F9FA;
					height: 120rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 40rpx 0 42rpx;

					&:not(:last-child) {
						margin-bottom: 20rpx;
					}

					.right-arrow-icon {
						width: 12rpx;
						height: 20rpx;
					}

					view {
						display: flex;
						align-items: center;

						>.tab-button {
							flex: 1;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 28rpx;
							color: #fff;
							transition: 0.2s;

							&.is-active {
								background-color: #2934D0;
							}
						}
					}

				}

				.menu-icon {
					margin-right: 42rpx;
				}
			}
		}
	}

	// 新版-用户身份按钮区域
	.user-status-btn {
		display: flex;
		// padding: 0 40rpx;
		justify-content: space-between;
		margin: 20rpx 0;
		padding: 20rpx 0;
		border-radius: 10px;
		background: #fff;

		>.u-btn {
			margin: 0;
			width: 50%;
			height: 120rpx;
			color: #000;
			font-weight: bold;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			>.image-for-size {
				margin-right: 10rpx;
			}

			&:first-child {
				border-right: 1px solid rgb(246, 246, 250);
			}

			// &.orange {
			// 	background: linear-gradient(225deg, #FFA068 0%, #FD6F5E 100%);
			// }
		}
	}

	.customerServiceBox {
		height: 100%;
		padding: 40rpx;
		flex-wrap: wrap;
		color: #fff;
		background: #1b1d29;

		.iconBox {
			width: 120rpx;
			height: 120rpx;
			margin: 20rpx auto;
			/* text-align: center; */
			/* line-height: 100px; */
			display: flex;
			justify-content: center;
			align-items: center;
			background: #2979ff;
			border-radius: 50%;
		}
	}
</style>